class Sire {
    constructor() {
        this.indexHTML = ` <div class="top"></div>
        <div class="logo">LOGO</div>
        <div class="text">欢迎您使用</div>
        <div class="add">我要开发票</div>
        <div class="nex">已开发票</div>
        <div class="and">我的</div>`
        this.bid = ` <div class="top"></div>
        <div class="toptext"> 填写开票信息 </div>
        <div class="bid"><span>投标信息:</span></div>
            <div class="inp"><span>项目名称:</span> <input type="text" id="bidname" value=""></div>
        <div class="bid"><span>发票信息:</span></div>
            <div class="inp"><span>发票抬头:</span> <input type="text" id="bidhead" value=""></div>
            <div class="inp"><span>同意社会信用代码:</span> <input type="text"  id="bidcode" value=""></div>
            <div class="inp"><span>地址:</span> <input type="text"  id="bidsite" value=""></div>
            <div class="inp"><span>电话:</span> <input type="text"  id="bidphone" value=""></div>
            <div class="inp"><span>开户行:</span> <input type="text"  id="bidbank" value=""></div>
            <div class="inp"><span>账号:</span> <input type="text"  id="biduser" value=""></div>

        <div class="bid"><span>接收信息:</span></div>
            <div class="inp"><span>手机号:</span> <input type="text"  id="phone" value=""></div>
            <div class="inp"><span>邮箱:</span> <input type="text" id="mail" value=""></div>

        <div class="bid"><span>文件费用:</span> <input type="radio" name="sech" id="cost"> 本次支付 <input type="radio" name="sech" id="costs">已支付
        </div>

         <div class="end"> 
             <div class="up">上一步</div>
             <div class="np">下一步</div>
         </div>`
        this.cont = `     <div class="top"></div>
        <div class="toptext"> 缴纳招标文件费 </div>
        <div class="cost"><span>文件费用:</span> <input type="text" id="money"></div>
        <div class="end"> 
            <div class="up">上一步</div>
            <div class="ks">支付</div>
        </div>`
        this.tabTop = `       <div class="top"></div>
        <div class="toptext"> 开票数据 </div> </tr> <table class="table" border="1">
        <tr>
        <td>序号</td>
        <td>日期</td>
        <td>项目名称</td>
        <td>费用(元)</td>
        <td>开票</td>
        </tr>
       `
        this.win = `<div class="top"></div>
       <div class="toptext"> 填写开票信息 </div>
       <div class="texts apps">支付成功！</div>
       <div class="end"> 
       <div class="up" id="ups">返回首页</div>
   </div>
      `
    }
    $(e) {
        return document.querySelector(e)
    }
    ges(el) {
        return document.querySelectorAll(el)
    }
    ever(obj) {
        let arr = []
        for (let key in obj) {
            arr.push(`${key}=${obj[key]}`)
        }
        return arr.join("&")
    }
    //弹窗方法的封装
    inite({
        text = ``,
        up = function () {},
        np = function () {},
        ap = function () {},
        on = function () {},
        sp = function () {},
    }) { //传入 弹窗显示数据 和操作执行操作函数
        //渲染页面
        this.$(".box").innerHTML = text
        //添加事件 
        this.$(".box").addEventListener("click", e => {

            switch (e.target.className || e.target.parentNode.className) {
                case "up":
                    up();
                    break
                case "np":
                    np();
                    break
                case "ks":
                    ap();
                    break
                case "on":
                    on(e.target.parentNode.id);
                    break
                case "sp":
                    sp();
                    break

            }
        })


    }
    //ajax封装
    ajaxget({
        url,
        text = {},
        callback
    }) {
        //创建ajax 核心对象
        let xhr = new XMLHttpRequest;
        // 建立连接
        let str = url + "?" + this.ever(text)
        xhr.open("get", str)
        // 发送请求   
        xhr.send()
        // 监听
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                callback(xhr.responseText)
            }
        }
    }
    ajaxpost({
        url,
        text = {},
        hed = {},
        callback
    }) {
        console.log(text);
        //创建ajax 核心对象
        let xhr = new XMLHttpRequest;
        // 建立连接
        xhr.open("POST", url)
        //请求头
        Object.keys(hed).forEach(item => {
            xhr.setRequestHeader(item, hed[item])
        })
        // 发送请求
        xhr.send(JSON.stringify(text))
        // 监听
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                callback(xhr.responseText)
            }
        }
    }
}


class Seed extends Sire {
    constructor() {
        super()
        this.data = null
        this.init() //调用入口文件 
    }
    init() {
        //渲染主页
        this.$(".box").innerHTML = this.indexHTML
        //主页面添加事件

        this.indexEvent()

    }
    indexEvent() {
        let thas = this
        this.$(".box").addEventListener("click", function (e) {
            switch (e.target.className) {
                case "add":
                    thas.inite({
                        text: thas.bid,
                        up: function () {
                            thas.$(".box").innerHTML = thas.indexHTML
                        },
                        np() {
                            console.log(thas.getData());
                            thas.data = thas.getData()
                            thas.$(".box").innerHTML = thas.cont
                        },
                        ap() {
                            thas.data["money"] = thas.$("#money").value
                            thas.ajaxget({
                                url: "/add",
                                text: {
                                    obj: JSON.stringify(thas.data)
                                },
                                callback(str) {
                                    console.log(str);
                                }

                            })
                            thas.$(".box").innerHTML = thas.win
                            console.log("支付页面");
                        }


                    });
                    break
                case "nex": // 查看数据
                    //获取 数据
                    thas.ajaxget({
                        url: "/gain",
                        text: {},
                        callback(str) {
                            //调用渲染
                            thas.rander(JSON.parse(str), thas)
                            console.log(str);
                        }

                    })

                    break
                case "and": //我的
                    thas.ajaxget({
                            url: "/and",
                            text: {},
                            callback(str) {
                                let arr = JSON.parse(str)[0]
                                let isstr = ` <div class="top"></div>
                                <div class="toptext"> 我的信息 </div>
                                
                                  
                               
                                <div class="bid"><span>发票信息:</span></div>
                                <div class="inp"><span>发票抬头:</span> <span class="k"></span>  <span class="s">${arr.bidhead}</span></div>
                                <div class="inp"><span>同意社会信用代码:</span> <span class="k"></span>  <span class="s">${arr.bidcode}</span></div>
                                <div class="inp"><span>地址:</span><span class="k"></span>  <span class="s">${arr.bidsite}</span></div>
                                <div class="inp"><span>电话:</span> <span class="k"></span>  <span class="s">${arr.bidphone}</span></div>
                                <div class="inp"><span>开户行:</span><span class="k"></span>  <span class="s">${arr.bidbank}</span></div>
                                <div class="inp"><span>账号:</span> <span class="k"></span>  <span class="s">${arr.biduser}</span></div>
                        
                                <div class="bid"><span>接收信息:</span></div>
                                <div class="inp"><span>手机号:</span><span class="k"></span>  <span class="s">${arr.phone}</span></div>
                                <div class="inp"><span>邮箱:</span> <span class="k"></span>  <span class="s">${arr.mail}</span></div>
                        
    
                                    <div class="end">
                                        <div class="up">返回</div>
                                        <div class="sp">修改</div>
                                    </div>
                                `
                                thas.inite({
                                    text: isstr,
                                    up: function () {
                                        thas.$(".box").innerHTML = thas.indexHTML
                                    },
                                    sp: function () {
                                        thas.$(".box").innerHTML = `      <div class="top"></div>
                                        <div class="toptext"> 我的信息 </div>
                                 
                                        <div class="bid"><span>发票信息:</span></div>
                                            <div class="inp"><span>发票抬头:</span> <input type="text" id="bidhead" value="${arr.bidhead}"></div>
                                            <div class="inp"><span>同意社会信用代码:</span> <input type="text"  id="bidcode" value="${arr.bidcode}"></div>
                                            <div class="inp"><span>地址:</span> <input type="text"  id="bidsite" value="${arr.bidsite}"></div>
                                            <div class="inp"><span>电话:</span> <input type="text"  id="bidphone" value="${arr.bidphone}" ></div>
                                            <div class="inp"><span>开户行:</span> <input type="text"  id="bidbank" value="${arr.bidbank}"></div>
                                            <div class="inp"><span>账号:</span> <input type="text"  id="biduser" value="${arr.biduser}"></div>
                                
                                        <div class="bid"><span>接收信息:</span></div>
                                            <div class="inp"><span>手机号:</span> <input type="text"  id="phone" value="${arr.phone}"></div>
                                            <div class="inp"><span>邮箱:</span> <input type="text" id="mail" value="${arr.mail}"></div>
                                
                                        
                                
                                         <div class="end"> 
                                             <div class="up">上一步</div>
                                             <div class="ks">保存</div>
                                         </div>`
                                    },
                                    ap:function(){
                                        let obj ={
                                         
                                            bidhead: thas.$("#bidhead").value,
                                            bidcode: thas.$("#bidcode").value,
                                            bidsite: thas.$("#bidsite").value,
                                            bidphone: thas.$("#bidphone").value,
                                            bidbank: thas.$("#bidbank").value,
                                            biduser: thas.$("#biduser").value,
                                            phone: thas.$("#phone").value,
                                            mail: thas.$("#mail").value,
                                          
                                        } 
                                        thas.ajaxget({
                                            url:"/and",
                                            text:{
                                            obj:JSON.stringify(obj),
                                              
                                            },
                                            callback(str){
                                                 thas.$(".box").innerHTML = thas.indexHTML

                                            }
                                            
                                        })
                                    }
                                })

                            }
                        }

                    );
                    break

            }

        })

    }

    //渲染
    rander(arr, thas) {
        let newstr = ``
        arr.forEach(item => {
            newstr += `   <tr  class="on" id="${item.id}">
        <td>${item.id}</td>
        <td>${item.data}</td>
        <td>${item.bidname}</td>
        <td>${item.money}</td>
        <td>${item.cost === true? "已开":"未开"}</td>
        </tr>`
        })
        let str = thas.tabTop + newstr + ` </table>  <div class="texts">说明: 点击任意一行数据， 看详情</div> <div class="end"> 
       <div class="up">返回首页</div>
     
   </div>`
        thas.inite({
            text: str,
            up: function () {
                thas.$(".box").innerHTML = thas.indexHTML
            },
            on: function (id) {
                thas.ajaxget({
                    url: "/gain",
                    text: {
                        id: id
                    },
                    callback(str) {
                        //调用渲染
                        console.log(str);
                        let arr = JSON.parse(str)[0]
                        thas.$(".box").innerHTML = ` <div class="top"></div>
                              <div class="toptext"> 开票数据 </div>
                              <div class="bid"><span>投标信息:</span></div>
                              <div class="inp"><span>项目名称:</span><span class="k"></span>  <span class="s">${arr.bidname}</span> </div>
                              <div class="inp"><span>金额:</span><span class="k"></span>  <span class="s">${arr.money}</span></div>
                                
                             
                              <div class="bid"><span>发票信息:</span></div>
                              <div class="inp"><span>发票抬头:</span> <span class="k"></span>  <span class="s">${arr.bidhead}</span></div>
                              <div class="inp"><span>同意社会信用代码:</span> <span class="k"></span>  <span class="s">${arr.bidcode}</span></div>
                              <div class="inp"><span>地址:</span><span class="k"></span>  <span class="s">${arr.bidsite}</span></div>
                              <div class="inp"><span>电话:</span> <span class="k"></span>  <span class="s">${arr.bidphone}</span></div>
                              <div class="inp"><span>开户行:</span><span class="k"></span>  <span class="s">${arr.bidbank}</span></div>
                              <div class="inp"><span>账号:</span> <span class="k"></span>  <span class="s">${arr.biduser}</span></div>
                      
                              <div class="bid"><span>接收信息:</span></div>
                              <div class="inp"><span>手机号:</span><span class="k"></span>  <span class="s">${arr.phone}</span></div>
                              <div class="inp"><span>邮箱:</span> <span class="k"></span>  <span class="s">${arr.mail}</span></div>
                      
                              <div class="bid"><span>开票信息:</span></div>
                                  <div class="inp"><span>是否开票:</span><span class="k"></span>  <span class="s">${arr.cost===true?"是/审核中":"否"}</span></div>
                                  <div class="inp"><span>开票日期:</span> <span class="k"></span>  <span class="s">${arr.cost===true?arr.data:"未开发票"}</span></div>
                      
                                  <div class="end">
                                      <div class="up">返回</div>
                                  </div>
                              `


                    }
                })
            },
        });
    }
    getData() {
        return {
            bidname: this.$("#bidname").value,
            bidhead: this.$("#bidhead").value,
            bidcode: this.$("#bidcode").value,
            bidsite: this.$("#bidsite").value,
            bidphone: this.$("#bidphone").value,
            bidbank: this.$("#bidbank").value,
            biduser: this.$("#biduser").value,
            phone: this.$("#phone").value,
            mail: this.$("#mail").value,
            cost: this.$("#cost").checked,
            costs: this.$("#costs").checked,
        }
    }

}
let seed = new Seed()
//思路 
// 我要开发票 
//弹窗 填写发票信息
//点击下一步 缴纳文件费用
//点击支付 提示支付成功 

//已开发票
// 弹窗显示开票数据列表
//点击任意行数据 显示开票详情

//我的
//弹窗显示我的信息
//点击修改 可以修改我的信息

//提取 公共方法
//弹窗
//数据请求
//提交数据请求
//查询数据请求
//修改数据请求
//渲染
//事件
//￥